<template>
    <div class="search-container">
        <!-- 搜索栏 -->
        <!-- 
            Tips: 在 van-search 外层增加 form 标签，
            且 action 不为空，即可在 iOS 输入法中显示
            搜索按钮。
             -->
        <form action="/">
          <van-search
            v-fofo
            v-model.trim="searchText"
            placeholder="请输入搜索关键词"
            show-action
            @search="onSearch(searchText)"
            @cancel="$router.back()" 
            @focus="isResultShow = false"
          />
        </form>
        <!-- /搜索栏 -->

        <!-- 搜索结果 -->
        <search-result
         v-if="isResultShow" 
         :search-text="searchText"
         />
        <!-- /搜索结果 -->

        <!-- 联想建议 -->
        <search-suggestion
         v-else-if="searchText"
         :search-text="searchText"
         @search="onSearch"
          />
        <!-- /联想建议 -->

        <!-- 历史记录 -->
        <search-history
         v-else
         :search-histories="searchHistories"
         @search="onSearch"
         @update-histories="searchHistories = $event"
          />
        <!-- /历史记录 -->

    </div>
</template>

<script>
import SearchResult from './components/search-result.vue'
import SearchHistory from './components/search-history.vue'
import SearchSuggestion from './components/search-suggestion.vue'
import { setItem,getItem } from '@/utils/storage'
// import { getSearchHistories } from '@/api/search'
import { mapState } from 'vuex'

export default {
    name: 'SearchIndex',
    components: {
        SearchSuggestion,
        SearchHistory,
        SearchResult
    },
    props: {},
    data () {
        return {
            searchText: '', // 搜索输入框的内容
            isResultShow: false, // 控制搜索结果的显示状态
            searchHistories: getItem('search-histories') || [] // 搜索历史数据
        }
    },
    computed: {
        ...mapState(['user'])
    },
    watch: {
        // 监视搜索历史纪录的变化，存储到本地存储
        searchHistories () {
            setItem('search-histories', this.searchHistories)
        }
    },
    created () {
        // this.loadSearchHistories()
    },
    mounted () {},
    methods: {
        // 把输入框设置为你要搜索的文本
        onSearch (searchText) {
            this.searchText = searchText

            const index = this.searchHistories.indexOf(searchText)
            if (index !== -1) {
                // 把重复项删除
                this.searchHistories.splice(index,1)
            }

            // 把最新的搜索历史纪录放到顶部
            this.searchHistories.unshift(searchText)

            // 如果用户已登录，则把搜索历史纪录存储到线上
            //   提示：只要我们调用获取搜索结果的数据接口，后端会给我们自动存储用户的搜索历史纪录
            // 如果没有登陆，则把搜索历史纪录存储到本地
            // setItem('search-histories',this.searchHistories)

            // 展示搜索结果
            this.isResultShow = true
        }//,
        
    //    async loadSearchHistories () {
    //         const searchHistories = getItem('search-histories') || []
    //         if (this.user) {
    //             const { data } = await getSearchHistories()
    //             console.log(data)
    //             const name = data.data.channels
    //             console.log(name)
    //             for(let i =0;i<=name.length;i++) {
    //                 console.log(name[i])
    //             }
    //             this.searchHistories = name
    //             console.log(this.searchHistories)
    //         } //else {

    //         console.log(searchHistories)

    //         this.searchHistories = searchHistories
    //        // }
    //     }
    }
}
</script>